// 1px的物理像素的实现方案

@import "var.scss";

// 一个物理像素(非逻辑像素)为1px的水平线条
%height-thin {
  height: 1px;
}

// 一个物理像素(非逻辑像素)为1px的垂直线条
%width-thin {
  width: 1px;
}

%height-thin,
%width-thin {
  background-color: $color-line-default;
}

// 绝对定位的伪元素
%pseudo-absolute {
  content: ' ';
  position: absolute;
  box-sizing: border-box;
}

// 薄高度(一个物理像素)的伪元素
%pseudo-height-thin {
  width: 100%;
  @extend %pseudo-absolute;
  @extend %height-thin;
}

// 薄宽度(一个物理像素)的伪元素
%pseudo-width-thin {
  height: 100%;
  @extend %pseudo-absolute;
  @extend %width-thin;
}

// 位于元素顶部、使用before伪元素构建的薄线条(一个物理像素)
%top-before-thin {
  position: relative;

  &::before {
    left: 0;
    top: 0;
    @extend %pseudo-height-thin;
  }
}

// 位于元素顶部、使用after伪元素构建的薄线条(一个物理像素)
%top-after-thin {
  position: relative;

  &::after {
    left: 0;
    top: 0;
    @extend %pseudo-height-thin;
  }
}

// 位于元素底部、使用before伪元素构建的薄线条(一个物理像素)
%bottom-before-thin {
  position: relative;
}

%bottom-before-thin::before {
  left: 0;
  bottom: 0;
  @extend %pseudo-height-thin;
}

// 位于元素底部、使用after伪元素构建的薄线条(一个物理像素)
%bottom-after-thin {
  position: relative;

  &::after {
    left: 0;
    bottom: 0;
    @extend %pseudo-height-thin;
  }
}

// 位于元素左边、使用before伪元素构建的薄线条(一个物理像素)
%left-before-thin {
  position: relative;

  &::before {
    left: 0;
    top: 0;
    transform-origin: left;
    @extend %pseudo-width-thin;
  }
}

// 位于元素左边、使用after伪元素构建的薄线条(一个物理像素)
%left-after-thin {
  position: relative;

  &::after {
    left: 0;
    top: 0;
    transform-origin: left;
    @extend %pseudo-width-thin;
  }
}

// 位于元素右边、使用before伪元素构建的薄线条(一个物理像素)
%right-before-thin {
  position: relative;

  &::before {
    right: 0;
    top: 0;
    transform-origin: right;
    @extend %pseudo-width-thin;
  }
}

// 位于元素右边、使用before伪元素构建的薄线条(一个物理像素)
%right-after-thin {
  position: relative;

  &::after {
    right: 0;
    top: 0;
    transform-origin: right;
    @extend %pseudo-width-thin;
  }
}

/**
 * 顶部、左边默认使用before伪元素实现薄线条
 * 底部、右边默认使用after伪元素实现薄线条
 * 假定最常用的使用场景为如下：
 * 使用::before伪元素绘制顶部线条，左边的线条
 * 使用::after伪元素绘制底部线条，右边的线条
 */

%left-thin {
  @extend %left-before-thin;
}

%right-thin {
  @extend %right-after-thin;
}

%top-thin {
  @extend %top-before-thin;
}

%bottom-thin {
  @extend %bottom-after-thin;
}

@each $devicePixelRatio in (1.3, 1.4, 1.5, 1.6, 1.7, 2, 2.25, 2.6, 3) {
  @media only screen and (-webkit-device-pixel-ratio: #{$devicePixelRatio}) {
    %height-thin {
      transform: scaleY(1 / $devicePixelRatio);
    }

    %width-thin {
      transform: scaleX(1 / $devicePixelRatio);
    }
  }
}

